<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../src/w2utils.js"></script>
<script type="text/javascript" src="../src/w2grid.js"></script>
<script type="text/javascript" src="../src/w2toolbar.js"></script>
<script type="text/javascript" src="../src/w2field.js"></script>
<script>
//<![CDATA[
$(function () {

    $('#grid').w2grid({
        name: 'grid',
        header: 'List of Names',
        url:'testurl',
        onRequest:function(event){
            if(event.phase!=='before'){
                return;
            }

            event.stop=true;
            var responseData={
            total: 28,
            page: 0,
                records: [
                    {recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
                    {recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012'},
                    {recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012'},
                    {recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012'},
                    {recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012'},
                    {recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '8/25/2012'},
                    {recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '9/3/2012'},
                    {recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '10/3/2012'},
                    {recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 22, fname: 'Peter', lname: 'Franson', email: 'vitali@gmail.com', sdate: '4/3/2012'},
                    {recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 24, fname: 'Manny', lname: 'Silver', email: 'jim@gmail.com', sdate: '12/3/2012'},
                    {recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jim@gmail.com', sdate: '4/3/2012'},
                    {recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012'},
                    {recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012'}
                 ]
            };
            var grid=this;
            //Facking ajax call
            var xhr = {
              responseText: JSON.stringify(responseData),
              status: '200'
            };
            setTimeout(function(){
                grid.requestComplete(xhr,'200', data.cmd);
            },2000);
        },
        show: {
            toolbar: true,
            footer: true,
            header: true,
            selectColumn: true,
            expandColumn: true,
            lineNumbers: true
        },
        recordsPerPage: 5,
        toolbar: {
            items: [
                { type: 'break', id: 'br1' },
                { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
                    { text: 'Item 1', icon: 'icon-page' },
                    { text: 'Item 2', icon: 'icon-page' },
                    { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
                ]},
                { type: 'break', id: 'br2' },
                { type: 'html', id: 'html1', html: '<b>HTML Button</b>' },
                { type: 'drop', id: 'drop1', caption: 'Drop Button', html: '123' }
            ]
        },
        searches: [
            { field: 'recid', caption: 'ID (int)', type: 'int' },
            { field: 'id', caption: 'ID (float)', type: 'float' },
            { field: 'fname', caption: 'First Name', type: 'text' },
            { field: 'lname', caption: 'Last Name', type: 'text' },
            { field: 'email', caption: 'Email', type: 'list', items: ['vitali@gmail.com', 'jim@gmail.com'] },
            { field: 'sdate', caption: 'Date', type: 'date' }
        ],
        sortData: [ { field: 'recid', direction: 'asc' } ],
        columnGroups: [
            { caption: '', span: 1 },
            { caption: 'General Information', span: 2},
            { caption: 'Email', span: 1, master: true },
            { caption: 'Important Dates', span: 3 }
        ],
        columns: [
            { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center1', style: 'text-align: right', resizable: true },
            { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
            { field: 'email', caption: 'Email', size: '40%', resizable: true, sortable: true },
            { field: 'sdate', caption: 'Start Date', size: '120px', resizable: true, editable: { type: 'date', format: 'Mon dd, yyyy', inTag: 'style="background-color: red"' } },
            { field: 'sdate', caption: 'End Date', size: '120px', resizable: true },
            { field: 'sdate', caption: 'Release Date', size: '120px', resizable: true }
        ],
        getFooterHTML: function () { console.log(this); return 'My Own Footer'; }
    });
});
//]]>
</script>
</head>
<body>
    <div id="grid" style="width: 100%; height: 500px;"></div>
    <input type="button" value="destroy" onclick="$().w2destroy('grid');"/>
</body>
</html>
